<template >
  <!-- 首页轮播 -->
  <div class="find-swiper">
    <swiper :swiperData="swiperData"> </swiper>
    <!-- 遮罩层 无法处理多出来两边-->
    <div class="swiper-cover-left swiper-cover"></div>
    <div class="swiper-cover-right swiper-cover"></div>
  </div>

  <!-- 分类标题 -->
  <sort-title-vue :title="title" :isShowTitle="isShowTitle"></sort-title-vue>
  <!-- 封面详情 -->
  <song-list-cover-vue
    :songListCoverData="songListCoverData"
  ></song-list-cover-vue>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import axios from "axios";
import swiper from "../../../../components/swiper/swiper.vue";
import sortTitleVue from "../../../../components/sortTitle/sortTitle.vue";
import songListCoverVue from "../../../../components/songListCover/songListCover.vue";

const store = useStore();

// 轮播图数据 传给 swiper 组件
const swiperData = ref("");
// 传递标题文字
const title = "推荐歌单";
const isShowTitle = true;

// 轮播图数据
axios
  .get(`/banner?type=0`)
  .then((res) => {
    swiperData.value = res.data.banners;
  })
  .catch((err) => {
    console.log(`获取轮播如是图数据失败${err}`);
  });

// 推荐歌单数据
const songListCoverData = ref("");
axios
  .get(`/personalized?limit=10&cookie=${store.state.m_user.cookie}`)
  .then((res) => {
    songListCoverData.value = res.data.result;
  })
  .catch((err) => {
    console.error(err);
  });
</script>
<style lang="less">
// 轮播图
.find-swiper {
  width: 1200px;
  height: 228px;
  position: relative;

  .swiper-cover {
    z-index: 89;
    position: absolute;
    width: 50px;
    height: 200px;
    background-color: rgb(255, 255, 255);
    top: -8px;
  }
  .swiper-cover-left {
    left: -13px;
  }
  .swiper-cover-right {
    right: -28px;
  }
}
</style>